iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
0
Modern Web

跟著 YDKJS 作者 Kyle Simpson 打造全新 JavaScript Mindset系列 第 5

[day04] YDKJS (Type) : Value 才有型別,變數沒有

  • 分享至 

  • xImage
  •  

False (註: false 本身就不是 object)
所以上面那一句話 是錯的

大家會認為 everything is an object ,其實是因為 值(value) 在 JavaScript 表現的行為很像 objects。

真正的意思是 : values in JavaScript can behave as objects.

  1. 行為(behave) 像是 object。
  2. Values 自身的型別(Type)是 object 。

這是完全不同的事。

行為(behave) 像是 object --> Boxing 會提到更詳細,但你很好奇這句話可以先找資料。

我怕有人看到標題或是上面給的答案會很氣氣氣氣氣氣 (X)

或是有人抱怨「我只要知道 js 行為就好,管他是什麼型別!」
yeah, 你這樣抱怨就像你是研究科學的科學家,只管看到「蘋果會掉到地上」,但是不管為什麼。


這邊給 Specification:

*可以看簡體 YDKJS 書 + 新同文堂 chrome extensions 的簡繁翻譯。我手邊沒有繁體書,圖書館也都被借走了 :(

在本語言規範中的演算法所操作的每一個值都有一種關聯的型別。
可能的值的型別就是那些在本條款中定義的型別。
型別還進一步被分為 ECMAScript 語言型別 和 語言規範型別。

一個 ECMAScript 語言型別對應於 ECMAScript 工程師使用 ECMAScript 語言直接操作的值。
ECMAScript 語言型別有 Undefined,Null,Boolean,String,Number,和 Object。

我這邊簡化 :Type 對應到使用 *ECMAScript Language 的「值的類型」。

  • 參照 ECMAScript type corresponds to values.
  • 型別來自對應「值」,可以比較和其他強型別語言(型別是與變數相連) 的差異。
    這就是為什麼我標題說 「Value 才有型別,變數沒有」。

*ECMAScript Language:這邊指 JavaScript,或是以前的 ActionScript。

Specification 也有寫到, ECMAScript 語言型別 :

  • Undefined
  • Null
  • 布林值(Boolean)
  • 字串 (String)
  • 數值 (Number)
  • 物件 (Object)
  • Symbol (ES6)

Primitive types

The Reference Specification: Type

快速掃過 built-in types:

  1. undefined type: 這個型別只有一個且唯一的「值」是 undefined.

很容易搞錯,因為型別和值一樣。另外字面意義 un-defined 也和大多數人理解可能有點出入,後續文章會講到。

  1. null type:這個有很嚴重的歷史原因,使用前要確定你理解 null 背後各種神奇故事。

當然,你可能在玩 JS踩地雷 或是 JS面試大補帖 之類的小遊戲時(??),對 null 的坑可能就有所了解。

  1. boolean type: 特別的兩個值 : truefalse

有些語言會用 0 / 1 來表示,但 javascript 有個型別就是 boolean, 代表 true 或是 false

  1. string type: 不像 Java 是一個 string object,JavaScript string 本身就是型別,string literal 型別就是 string。
  2. symboltype:ES6 才出現的新的型別。

經常在慣例上表示:這是一個私有的/特殊的/內部的屬性,別碰!

  1. number type: 所有 JS 裡面的數字。

當然,number 有很多東西可以討論,後續會寫細節。

  1. object type: 很多人誤解的原因就是 object 有很多 subtypes(function, array) ,或是對 boxing(封裝) 的誤解。

boxing : 有些東西的行為表現像是 object, 但是那不會使 boxing的對象 成為 object (that doesn't make it an object.)。

未來可能多一個屬性,也是 Primitive type 。

9.BigInt : 高度可能成為新的 primitive type
https://tc39.es/proposal-bigint/#sec-bigint-objects
BigInt is currently (June 17, 2019) in stage 3 of the ECMAScript specification.

注意: 除了 object 所有這些型別都被稱為「基本型別(primitives)」。

型別的重要意義

對照YDKJS 內容:

換句話說,如果引擎和開發者看待值 42(數字)與看待值 "42"(字串)的方式不同,那麼這兩個值就擁有不同的 型別 -- 分別是 number 和 string。

當你使用 42 時,你就在 試圖 做一些數字的事情,比如計算。
但當你使用 "42" 時,你就在 試圖 做一些字串的事情,比如輸出到頁面上。
這兩個值有著不同的型別。

你應該很明顯了解以下兩種賦值的意義,然後 預期兩種型別的行為不一樣。
這就是我們才需要 type 的原因。

var x;  
// there is differ behavior blow:
  x = '42'
  // or 
  x = 42 

多數型別都「不是 object」,但是行為很像。

希望你已經可以理解前半句話了。

繼續之前,回顧:

一般來說,很多程式語言,型別都是指「變數」,但是 javascript 裡面的型別是指 「值」。
所以

變數沒有型別,但「值」有。

變數可以在任何時候,持有任何值。
這也是為什麼 Kyle Simpson 不喜歡 TypeScript, Flow 的原因之一,他認為這和 JS 的 DNA 完全相反。

私人想法:我之前是用 Angular 2+ 所以綁定 TypeScript 的人,用 TypeScript 不是只有變數綁定型別這個好處,只是對沒使用過的人來說,這是差異最大的。

事實上,稍微熟悉 TypeScript 後,應該會大量研究 advanced type,
因為確實像 Kyle Simpson 說的,JS 的語言特點是 「變數沒有型別」,用 TS 好處就是可以把所有可能有的型別寫的「非常明白」,make your code super obvious 也是 Kyle Simpson 的目標,並沒有違合。

不過他自己也因為工作場合沒有需求需要使用 TS ,就完全沒碰,我個人認為有點可惜就是了。

TypeScript advanced type

最後也附上 Google成員對 TS 3.5版的建議,蠻多是宣告型別、型別斷定相關的議題,代表 TS 確實有很多地方還需要調整。

Google 成員對 TS 3.5版的建議
別人寫的,針對 Google成員意見回饋 的個人分析解讀


上一篇
[day03] 初步介紹 JavaScript 以及 Overview
下一篇
[day05] YDKJS (Type) : 初學者第一坑 - typeof 運算子, 詳解 undefined
系列文
跟著 YDKJS 作者 Kyle Simpson 打造全新 JavaScript Mindset31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
huli
iT邦新手 3 級 ‧ 2019-09-20 01:03:58

話說 Chrome 最新版已經偷跑可以用 BigInt 了XD
https://v8.dev/features/bigint

看更多先前的回應...收起先前的回應...
Ashe Li iT邦新手 5 級 ‧ 2019-09-20 01:09:03 檢舉

蠻早以前就偷跑了,不過畢竟還沒有列入 ECMAScript specification,讓子彈飛一下 (X

另外一個飛很快的是 Optional Chaining XDD
(TypeScript 下一版 v3.7.0 與 Babel v7 (transform-optional-chaining) 也都會支援此語法)
https://github.com/tc39/proposal-optional-chaining?fbclid=IwAR2ITxwEM0RWZJpgN82aT6eIf-Xgkjc_YQ6aiO27wYb7C4i2oMWxM44YxRA

之前用 ng 就有用過類似的語法了,不知道 React 有沒有

https://angular.io/guide/template-syntax#safe-navigation-operator

huli iT邦新手 3 級 ‧ 2019-09-20 01:16:43 檢舉

應該是說如果大家覺得好用,有打到痛點的指令好像就比較快能夠被支援XDD

Ashe Li iT邦新手 5 級 ‧ 2019-09-20 01:23:52 檢舉

跟 destructuring, rest 一樣嗎?
之前不熟悉不敢用,最近在看越看覺得越神
怎麼那麼好用的東西以前不敢用XDD

huli iT邦新手 3 級 ‧ 2019-09-20 02:41:02 檢舉

那兩個已經是 ES6 標準了所以沒差XDD 不過儘管這樣講,其實現在 babel 已經是標配了,不管用什麼還是會轉到 ES5,所以想用什麼新的語法都可以,最後還是會過 babel

0
ayugioh2003
iT邦新手 2 級 ‧ 2019-09-25 15:04:23

Primitive types 的第一點 undefined type: 重複打了 ~

Ashe Li iT邦新手 5 級 ‧ 2019-09-25 16:05:38 檢舉

感恩 有人認真看文章 QAQ

我要留言

立即登入留言